<template>
  <svg :class="svgClass" aria-hidden="true" @click="handleClick">
    <use :xlink:href="iconName"></use>
  </svg>
</template>
<script>
  export default {
    name: 'svgIcon',
    props: {
      name: { type: String, required: true },
      className: { type: String }
    },
    computed: {
      iconName () {
        return `#${this.name}`;
      },
      svgClass () {
        if (this.className) {
          return 'svg-icon ' + this.className;
        } else {
          return 'svg-icon';
        }
      }
    },
    methods: {
      handleClick () {
        this.$emit('click');
      }
    }
  };
</script>
